<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        li{
            width: 100px;
            height: 20px;
            line-height:  20px;
            position: relative;
            margin: 10px;
        }
        button {
            position: absolute;
            right: 3px;
            top: 1px;
            height: 20px;
            /* 隐藏深处按钮 */
            display:none;
                    
        }
        li:hover button {
            /* 显示删除按钮 */
            display:block;
            
        }
    </style>
   
</head>
<body>
<ul>
    <li>内容1<button >删除</button></li>
    <li>内容2<button>删除</button></li>
    <li>内容3<button>删除</button></li>
    <li>内容4<button>删除</button></li>
    <li>内容5<button>删除</button></li>
</ul>
</body>
</html>
 <script type="text/javascript">

        //定义按钮点击事件del，删除上级节点
        // function del(x){
        //     x.parentNode.parentNode.removeChild(x.parentNode);
        // }
        var ull = document.getElementsByTagName('ul')[0];
        console.log(ull)
        ull.onclick=function(e){
            var el = e.target;
             el.parentNode.parentNode.removeChild(el.parentNode);
        }
        
    </script>